<template>
	<view class="page-content">
		<view class="page-top">
			<image class="t-logo" src="/static/index/logo.png"></image>
			<view class="t-but" v-if="pairStatu ==='' || pairStatu === undefined" @click="toPair">
				配对设备
			</view>
		</view>
		<!-- 1-已配对 2-未配对  -->
		<view class="page-top">
			<view class="page-top-l">
				<view class="t-tit">{{i18n.index.dangqianpedui}}：{{pairStatu==='' || pairStatu === undefined?'未配对':'Suelinan'}}
					<text class="t-model"
						:style="{background:modelType==='1'?'#D70000':'#00CD8B'}"
						v-if="pairStatu !='' && pairStatu != undefined" >{{modelType==='1'?i18n.index.jihuoban:i18n.index.tongyongban}}</text>
				</view>
			</view>
			<view class="page-top-r" v-if="modelType==='2'"><!-- 1-激活版  2-通用版 -->
				<!-- 时间账户 -->
				{{i18n.index.shijianzhanghu}}：60{{i18n.index.time}}<text class="icons icon-gengduo"></text>
			</view>
		</view>
		<!--内容-->
		<view class="page-body">
			<view class="pro-box">
				<!--进度条一-->
				<view class="pro-box-item">
					<view class="pro-left"></view>
					<view class="pro-con">
						<!--进度条-->
						<d-progress :percent="percent.percent1" progress_b_c="#08246e" progress_t_c="#00c9a7">{{percent.percent2}}
						</d-progress>
					</view>
					<view class="pro-right" @click="start(btnDis)">
						<view id="countDown" style="display: none;">
							<w-countdown 
							:time="timestamp" 
							:auto-start="false" 
							:now="now" 
							@start="countDownStart"
							@abort="countDownAbort" 
							@end="countDownEnd" 
							@progress="progress" 
							ref="countdown">
							</w-countdown>
						</view>
						<image class="but-ks" :src="btnDis===false?icon_ks:icon_zt"></image>
					</view>
					
				</view>
				<!--剩余-定时-->
				<view class="pro-con-txt">{{i18n.index.shengyu}}：{{percent.percent2}}/{{i18n.index.dingshi}}：60</view>
				<view class="t-button-b">
					<!--加购-->
					<view class="t-button" @click="toRecharge">+{{i18n.index.jiagou}}</view>
				</view>
				<!--进度条二-->
				<view class="pro-box-item2">
					<view class="pro-left" @click="cutDown(percent.percent4,'2')">
						<image class="but-r" src="/static/index/icon-l.png"></image>
					</view>
					<view class="pro-con">
						<!--进度条-->
						<d-progress :percent="percent.percent3" progress_b_c="#00cba7" progress_t_c="#fcca32">{{percent.percent4}}
						</d-progress>
					</view>
					<view class="pro-right" @click="ugment(percent.percent4,'2')">
						<image class="but-r" src="/static/index/icon-r.png"></image>
					</view>
				</view>
				<!--压力-->
				<view class="pro-con-txt">{{i18n.index.yali}}(0~280)</view>
				<!--进度条三-->
				<view class="pro-box-item2">
					<view class="pro-left" @click="cutDown(percent.percent5,'3')">
						<image class="but-r" src="/static/index/icon-l.png"></image>
					</view>
					<view class="pro-con">
						<!--进度条-->
						<d-progress :percent="percent.percent5" progress_b_c="#6b1363" progress_t_c="#ec0014">{{percent.percent6.name}}
						</d-progress>
					</view>
					<view class="pro-right" @click="ugment(percent.percent5,'3')">
						<image class="but-r" src="/static/index/icon-r.png"></image>
					</view>
				</view>
				<!--模式-->
				<view class="pro-con-txt">{{i18n.index.moshi}}A B C D E F</view>
			</view>

			<view class="box-r">
				<block v-for="(item,index) in list" :key="index">
					<view class="li-box" @click="changeStatu(index,index.statu)">
						<view class="light-bg3" :class="item.statu===true?'animate3':''"
							:style="{background:item.statu===true?item.bg3:bg33}">
							<view class="light-bg2" :class="item.statu===true?'animate2':''"
								:style="{background:item.statu===true?item.bg2:bg22}">
								<view class="light-bg1" :class="item.statu===true?'animate1':''"
									:style="{background:item.statu===true?item.bg1:bg11}">

								</view>
							</view>
						</view>
						<view class="light-name">{{item.name}}</view>
						<view class="light-bg"></view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import wCountdown from "@/components/w-countdown/w-countdown.vue"
	import dProgress from '@/components/w-progress/d-progress.vue';
	export default {
		name: 'indexTwo',
		components: {
			dProgress,
			wCountdown
		},
		data() {
			return {
				timestamp: 1000000, //定时
				icon_ks: '/static/index/icon-ks.png',  //开始按钮
				icon_zt: '/static/index/icon-zt.png',  //暂停按钮
				noPairStatu: false,
				percent:{
					percent1: 0,
					percent2: 0,
					percent3: 0,
					percent4: 0,
					percent5: 100,
					percent6: {
						num:0,
						name:'A'
					}
				},
				percents:['A','B','C','D','E','F'], //模式选项
				btnDis: false, //按钮判断 开始-暂停
				process: 50,
				bg11: 'rgba(116, 116, 116, 1)',//呼吸灯停止背景颜色
				bg22: 'rgba(116, 116, 116, .6)',
				bg33: 'rgba(116, 116, 116, 0)',
				list: [{ //呼吸灯背景颜色、状态
					name: 'CH1',
					statu: false,
					bg1: 'rgba(26, 171, 217, 1)',
					bg2: 'rgba(26, 171, 217, .6)',
					bg3: 'rgba(26, 171, 217, .2)'
				}, {
					name: 'CH2',
					statu: false,
					bg1: 'rgba(0, 205, 139, 1)',
					bg2: 'rgba(0, 205, 139, .6)',
					bg3: 'rgba(0, 205, 139, .2)'
				}, {
					name: 'CH3',
					statu: false,
					bg1: 'rgba(123, 204, 97, 1)',
					bg2: 'rgba(123, 204, 97, .6)',
					bg3: 'rgba(123, 204, 97, .2)'
				}, {
					name: 'CH4',
					statu: false,
					bg1: 'rgba(245, 203, 55, 1)',
					bg2: 'rgba(245, 203, 55, .6)',
					bg3: 'rgba(245, 203, 55, .2)',
				}, {
					name: 'CH5',
					statu: false,
					bg1: 'rgba(206, 139, 103, 1)',
					bg2: 'rgba(206, 139, 103, .6)',
					bg3: 'rgba(206, 139, 103, .2)',
				}, {
					name: 'CH6',
					statu: false,
					bg1: 'rgba(166, 74, 151, 1)',
					bg2: 'rgba(166, 74, 151, .6)',
					bg3: 'rgba(166, 74, 151, .2)',
				}, {
					name: 'CH7',
					statu: false,
					bg1: 'rgba(191, 37, 76, 1)',
					bg2: 'rgba(191, 37, 76, .6)',
					bg3: 'rgba(191, 37, 76, .2)',
				}, {
					name: 'CH8',
					statu: false,
					bg1: 'rgba(215, 0, 0, 1)',
					bg2: 'rgba(215, 0, 0, .6)',
					bg3: 'rgba(215, 0, 0, .2)',
				}]
			}
		},
		computed: {
			...mapGetters(["modelType", "pairStatu"]),
			i18n() {
				return this.$t('message');
			}
		},
		onShow(option) {
			console.log(222, option)
			console.log(2223, this.modelType)
			console.log(2223, this.pairStatu)
			if(this.pairStatu === '' || this.pairStatu === undefined){
				this.noPairStatu = false
			}else{
				this.noPairStatu = true
				console.log(2)
			}
		},
		methods: {
			...mapActions("user", ["setModelType", "setPairStatu"]),
			//呼吸灯
			changeStatu(index, statu) {
				if(!this.noPairStatu){
					uni.showToast({
						title:this.$t('message').popup.txt2,
						icon:'none',
						duration:2000
					})
				}else{
					if (this.list.length > 0) {
						this.list.forEach((item, ind) => {
							if (index === ind) {
								item.statu = !item.statu
							}
						})
					}
				}
				
			},
			//跳转设备列表
			toPair() {
				uni.navigateTo({
					url: `/pages/home/pair`
				})
			},
			//跳转账户充值
			toRecharge() {
				uni.navigateTo({
					url: `/pages/account/recharge`
				})
			},
			//跳转设备列表
			toPair() {
				uni.navigateTo({
					url: `/pages/home/pair`
				})
			},
			//减少
			cutDown(num,type){
				if(!this.noPairStatu){
					uni.showToast({
						title:this.$t('message').popup.txt2,
						icon:'none',
						duration:2000
					})
				}else{
					if(type==='2'){
						if(num > 0){
							this.percent.percent4 = this.percent.percent4 - 10;
							this.percent.percent3 = this.percent.percent4*100 / 280;
						}
					}else if(type==='3'){
						if(this.percent.percent6.num > 0){
							this.percent.percent6.num--;
							this.percent.percent6.name = this.percents[this.percent.percent6.num];
						}
					}
				}
				
			},
			//增加
			ugment(num,type){
				if(!this.noPairStatu){
					uni.showToast({
						title:this.$t('message').popup.txt2,
						icon:'none',
						duration:2000
					})
				}else{
					if(type==='2'){
						if(num < 280){
							this.percent.percent4 = this.percent.percent4 + 10;
							this.percent.percent3 = this.percent.percent4*100 / 280;
						}
					}else if(type==='3'){
						if(this.percent.percent6.num < this.percent.percents.length-1){
							this.percent.percent6.num++;
							this.percent.percent6.name = this.percent.percents[this.percent.percent6.num];
						}
					}
				}
				
			},

			// 现在的时间戳--必须传入
			now() {
				return Date.now()
			},
			// 点击按钮触发倒计时开始
			start(btnDis) {
				if(!this.noPairStatu){
					uni.showToast({
						title:this.$t('message').popup.txt2,
						icon:'none',
						duration:2000
					})
				}else{
					if(!btnDis){
						this.$refs.countdown.start(); //开始倒计时
					}else{
						this.$refs.countdown.abort(); //暂停倒计时
					}
					this.btnDis = !btnDis;
				}
			},
			// 倒计时开始
			countDownStart() {
				console.log('倒计时开始');
			},
			// 倒计时暂停
			countDownAbort() {
				console.log('倒计时暂停');
			},
			// 倒计时结束
			countDownEnd() {
				console.log('倒计时结束');
			},
			// 倒计时进行中
			progress(time) {
				console.log(time);
				this.percent.percent2 = time.minutes;
				this.percent.percent1 = time.minutes*100/60;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.li-box {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;

		.light-name {
			position: absolute;
			z-index: 3;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 72rpx;
			color: #fff;
		}

		.light-bg {
			position: absolute;
			z-index: 1;
			width: 10rpx;
			height: 100%;
			background: rgba(116, 116, 116, .3);
		}

		.light-bg3 {
			position: relative;
			z-index: 2;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 110rpx;
			height: 110rpx;
			border-radius: 55rpx;
			margin: 5rpx auto;

			.light-bg2 {
				position: relative;
				z-index: 2;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 90rpx;
				height: 90rpx;
				border-radius: 45rpx;

				.light-bg1 {
					position: relative;
					z-index: 2;
					width: 74rpx;
					height: 74rpx;
					border-radius: 37rpx;
					text-align: center;
				}
			}
		}
	}

	.animate1 {
		cursor: pointer;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		overflow: hidden;
		-webkit-animation-timing-function: ease-in-out;
		-webkit-animation-name: breathe1;
		-webkit-animation-duration: 800ms;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-direction: alternate;
	}

	@-webkit-keyframes breathe1 {
		0% {
			opacity: 0.3;
		}

		100% {
			opacity: 1;
		}
	}

	.animate2 {
		cursor: pointer;
		overflow: hidden;
		-webkit-animation-timing-function: ease-in-out;
		-webkit-animation-name: breathe2;
		-webkit-animation-duration: 1400ms;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-direction: alternate;
	}

	@-webkit-keyframes breathe2 {
		0% {
			opacity: .3;
		}

		100% {
			opacity: 1;
		}
	}

	.animate3 {
		cursor: pointer;
		overflow: hidden;
		-webkit-animation-timing-function: ease-in-out;
		-webkit-animation-name: breathe3;
		-webkit-animation-duration: 1800ms;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-direction: alternate;
	}

	@-webkit-keyframes breathe3 {
		0% {
			opacity: .3;
		}

		100% {
			opacity: 1;
		}
	}

	.pro-box {
		display: flex;
		flex-direction: column;
		margin-bottom: 100rpx;

		.pro-box-item {
			display: flex;

			.pro-left,
			.pro-right {

				.but-l,
				.but-r {
					width: 41rpx;
					height: 52rpx;
				}
			}

			.pro-left {
				width: 100rpx;
				display: flex;
			}

			.pro-con {
				display: flex;
				flex-direction: column;
			}

			.pro-right {
				width: 100rpx;
				display: flex;
				align-items: flex-end;
				justify-content: flex-start;

				.but-ks {
					display: flex;
					width: 54rpx;
					height: 54rpx;
					margin-bottom: 30rpx;
				}
			}
		}

		.pro-box-item2 {
			display: flex;
			justify-content: center;
			align-items: center;

			.pro-left,
			.pro-right {
				width: 100rpx;
				display: flex;
				justify-content: center;

				.but-l,
				.but-r {
					width: 41rpx;
					height: 52rpx;
				}
			}

			.pro-con {
				display: flex;
			}

		}

		.pro-con-txt {
			text-align: center;
			font-size: $font-sm;
			margin-bottom: 20rpx;
		}

		.t-button-b {
			display: flex;
			justify-content: center;

			.t-button {
				display: flex;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				padding: 0 20rpx;
				background: $uni-but-bg-color;
				font-size: $font-sm;
				margin-bottom: 30rpx;
			}
		}
	}

	.page-content {
		width: 100vw;
		height: calc(100vh - 40rpx);
		background: $uni-bg-color;
		color: $font-color-w;
		padding: $page-row-spacing;

		//内容
		.page-body {
			display: flex;
			height: calc(100% - 70rpx);
			width: 100%;

			.box-l {
				flex: 75;
				display: flex;
				flex-direction: column;
			}

			.box-r {
				flex: 25;
				display: flex;
				flex-direction: column;
			}
		}

		//头部
		.page-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 50rpx;
			margin-bottom: 20rpx;

			.t-logo {
				width: 239rpx;
				height: 40rpx;
			}
			.t-but {
				height: 50rpx;
				line-height: 50rpx;
				padding: 0 20rpx;
				background: $uni-but-bg-color;
				border-radius: 25rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #FEFEFE;
			}

			.page-top-l {
				display: flex;

				.t-tit {
					font-size: $font-base;
				}

				.t-model {
					height: 40rpx;
					border-radius: 20rpx;
					padding: 0 16rpx;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 40rpx;
					margin-left: 16rpx;
				}
			}

			.page-top-r {
				font-size: 28rpx;
				font-weight: 400;
				color: #DDDDDD;
			}
		}
	}
</style>
